<template>

  <div class="container-fuild">
    <div class="row">
      <div class="card">
<!--        <div class="card-header">-->
<!--          <p class="card-title">实训日志管理</p>-->
<!--          <p class="card-title">{{ this.$route.query.id }}</p>-->
<!--          &lt;!&ndash;          <p class="card-title">{{this.$route.params.id}}</p>&ndash;&gt;-->
<!--          &lt;!&ndash;          <p class="card-title">{{this.$route.query.id}}</p>&ndash;&gt;-->
<!--        </div>-->
        <div class="card-body custom-ekeditor">
          <div id="ckeditor">

            <template>
              <span
                  style="float: left; color: #8492a6; font-size: 16px;padding-top: 8px;padding-left: 2px;margin-bottom: 30px">请选择班级：</span>
              <el-select v-model="className" placeholder="请选择实训班级"  @change="tableShow"
                         style="width: 300px;float: left;color: #8492a6;">
                <el-option
                    v-for="item in classNames"
                    :key="item.className"
                    :label="item.className"
                    :value="item.className">
                  <span style="float: left; color: #8492a6; font-size: 13px">{{ item.className }}</span>
                </el-option>
              </el-select>
            </template>

            <br>
            <div>
              <template>
                <el-table
                    :data="tableData" :cell-style="cellStyle"
                    style="width: 100% ;color: #7d94c0">
                  <el-table-column
                      label="序号"
                      width="90">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="日志时期"
                      width="160">
                    <template slot-scope="scope">
                      <span>{{ scope.row.logDate }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="星期"
                      width="120">
                    <template slot-scope="scope">
                      <span>{{ scope.row.weekday }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="摘要" :show-overflow-tooltip="true"
                      width="250">
                    <template slot-scope="scope">
<!--                      <span>{{scope.row.content}}</span>-->
<!--                      <div v-else-if="scope.row.content !==''">-->
                        <p v-html="removeHtml(scope.row.content)"></p>
<!--                      </div>-->

                    </template>
                  </el-table-column>
                  <el-table-column
                      label="状态"
                      width="120">
                    <template slot-scope="scope">
                      <span>{{ scope.row.isEdit }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作"  style="margin-left: 30px">
                    <template slot-scope="scope">
                      <el-button size="mini" style="background-color: steelblue ;color: white"
                                 @click="handleEdit(scope.$index, scope.row)">查看 / 编辑
                      </el-button>

                    </template>
                  </el-table-column>
                </el-table>
                <div class="block" style="margin-top: 30px;margin-bottom: 10px">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="currentPage"
                      :page-size="10"
                      layout="prev, pager, next, jumper"
                      :total="parseInt(pages)">
                  </el-pagination>
                </div>
              </template>
            </div>


            <el-dialog title="学生日志" :visible.sync="dialogVisible" style="font-weight: bold"
                       append-to-body width="65%" class="showAll_dialog">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" :inline="true">
                <el-row>
                  <el-form-item label="实训班级" prop="className" style="float: left;margin-left: 30px">
                    <el-input v-model="className" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="实训教师" prop="manager" style="float: left;margin-left: 50px">
                    <el-input v-model="ruleForm.manager"></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="实训地点" prop="location" style="float: left;margin-left: 30px">
                    <el-input v-model="ruleForm.location"></el-input>
                  </el-form-item>
                  <el-form-item label="实训时间" prop="logDate" style="float: left;margin-left: 50px" >
                    <el-input v-model="ruleForm.logDate" :disabled="true"></el-input>
                  </el-form-item>
                </el-row>

                <el-row>
                  <el-form-item prop="content" style="display: flex;">
                    <template>
                      <quill-editor class="editor" style="height: 150px;width: 750px;margin-left: 30px"
                                    ref="myTextEditor"
                                    v-model="ruleForm.content"
                                    :options="editorOption"
                                    @blur="onEditorBlur($event)"
                                    @focus="onEditorFocus($event)"
                                    @ready="onEditorReady($event)"
                                    @change="onEditorChange($event)">
                      </quill-editor>
                    </template>
                  </el-form-item>
                </el-row>
                <el-row>
                  <div class="btn-onsubmit">
                    <template>
                      <el-button type="primary" :plain="true" @click="EditPost('ruleForm')"
                                 style="background-color: #0261a0;border-color:#0261a0 ;color: whitesmoke">提交
                      </el-button>
                    </template>
                  </div>
                </el-row>

              </el-form>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

export default {

  name: "Attendance",
  data() {
    return {
      id: this.$route.query.id,
      dialogVisible: false,
      tableData: [],
      ruleForm:{
        content:'',
        manager:'',
        logDate:'',
        location:'',
        advice:''
      },
      editorOption: {  //富文本编辑器
        modules: {
          toolbar: [
            [{color: []}, {background: []}], // 字体颜色、字体背景颜色
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            ['blockquote', 'code-block'], // 引用  代码块
            [{header: 1}, {header: 2}], // 1、2 级标题
            [{list: 'ordered'}, {list: 'bullet'}], // 有序、无序列表
            [{script: 'sub'}, {script: 'super'}], // 上标/下标
            [{indent: '-1'}, {indent: '+1'}], // 缩进
            [{align: []}], // 对齐方式
          ],
        },
        placeholder: '请在这里填写日志', //提示
        readyOnly: false, //是否只读
        theme: 'snow', //主题 snow/bubble
        syntax: true, //语法检测
      },
      rules: {
        content: [
          {required: true, message: '请输入日志', trigger: 'blur'},
          {min: 50, max: 500, message: '长度在 50 到 500 个字符', trigger: 'blur'}
        ],
        location: [
          {required: true, message: '请输入实训地点', trigger: 'blur'},
        ],
        manager:[
          {required: true, message: '请输入实训教师', trigger: 'blur'},
        ],
      },
      date: '',
      list2: [{date: 1}, {date: 2}],
      classname2: '',
      className: '',
      classNames: [],
      currentPage: 1,
      pages:'',
    }
  },
  mounted() {

    this.classShow();
    // this.tableShow();
    // this.DateShow();
  },
  methods: {


    classShow: function () {
      let that1 = this;
      let that2 = this;
      this.axios.get('http://localhost:9090/user/getTrainClass/' + this.id)
          .then(function (ret) {
            console.log(ret.data.data);
            that1.classNames = ret.data.data;
            that1.className = ret.data.data[0].className;
            that1.tableShow();
            // that2.axios.get('http://localhost:9090/user/getStudentLog/' + that2.id + '/' + that2.className)
            //     .then(res => {
            //       console.log(that2.id);
            //       console.log(that2.className)
            //       console.log(res.data.data);
            //       that1.tableData = res.data.data;
            //     }).catch(err => {
            //   console.log(err);
            // })
          })
    },
    tableShow:function (){
      let that = this;
      console.log(this.id);
      console.log(this.className)
      this.axios.get('http://localhost:9090/user/getStudentLog/'+this.id+'/'+this.className+'/'+this.currentPage)
          .then(res =>{
            console.log(res.data.data);
            that.tableData = res.data.data.list;
            that.pages=res.data.data.total
            console.log(res.data.data.total);
          }).catch(err =>{console.log(err);})
    },
    handleEdit(index, row, rowIndex) {
      // console.log(index, row,rowIndex);
      this.classname2 = row.className;
      this.ruleForm.logDate = row.logDate;
      // console.log(classname);
      this.dialogVisible = true;
      let that = this;
      this.axios.get('http://localhost:9090/user/getAttendance/' + this.classname2 + '/' +this.id)
          .then(function (ret) {
            // console.log(ret.data.data);
            that.list2 = ret.data.data;
          }).catch(function (err) {
      })
      let that1 = this;
      that1.axios.get('http://localhost:9090/user/getOneLogDate/'+row.logDate)
          .then(res =>{
            // console.log(res.data.data[0].content)
            that.ruleForm.content=res.data.data[0].content;
            that.ruleForm.location=res.data.data[0].location;
            that.ruleForm.manager=res.data.data[0].manager;

          }).catch(function (err) {
      })
    },
    cellStyle({row, column, rowIndex, columnIndex}) {
      // if(row.morning !== "正常" || row.afternoon !== "正常" || row.evening !== "正常"){ //指定坐标rowIndex ：行，columnIndex ：列
      //     return 'background-color:rgb(255 248 248);' //rgb(105,0,7)
      // }
      if ((row.isEdit !== "已编辑" && columnIndex === 4)) {
        return "color:#e26f6f;"
      } else return 'color:#7d94c0'
    },
    DateShow:function (){
      const today = new Date();
      const year = today.getFullYear();
      let month = today.getMonth() + 1;
      let day = today.getDate();
      month = month < 10 ? '0' + month : month;
      day = day < 10 ? '0' + day : day;
      this.ruleForm.logDate = `${year}-${month}-${day}`
      // this.tableShow();
    },
    EditPost(formName) {
      // this.$refs.content.validateField('content')
      let that = this;
      let that1 = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {

          that1.$axios({
            method:'post',
            url:'http://localhost:9090/user/updateLog',
            header:{
              'Content-type':'application/json'
            },
            data:{
              studentId:that.id,
              className:that.className,
              logDate:that.ruleForm.logDate,
              manager:that.ruleForm.manager,
              location:that.ruleForm.location,
              content:that.ruleForm.content,
              advice:that.ruleForm.advice,
            },
            transformRequest:[function (data){
              let ret =''
              for (let it in data){
                ret +=encodeURIComponent(it) + '=' +encodeURIComponent(data[it]) + '&'
              }
              return ret
            }]
          }).then((res) => {
            console.log(res.data)
            alert('提交成功!');
          }).catch(function (error) {
            console.log('请求失败：' + error)
          })
          this.dialogVisible = false;
          this.$router.go(0);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    removeHtml(str){
      if (str === 'Undefined' || str === 'null' || str === '') { //空
        return 'null';
      } else if (Object.prototype.toString.call(str) === '[object Undefined]') { //空
        return 'true';
      }
      else if (
          Object.prototype.toString.call(str) === '[object String]' ||
          Object.prototype.toString.call(str) === '[object Array]') { //字条串或数组
        return str.length == 0 ? true : str
            .replace(str ? /&(?!#?\w+;)/g : /&/g, '&amp;')
            .replace(/&lt;/g,"<")
            .replace(/&gt;/g,">")
            .replace(/&quot;/g,"\"")
            .replace(/&#39;/g, "\'")
            .replace(/&amp;nbsp;/g,'\u3000')
            .replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/g)
            .replace(/(\t)/g, "") // 去掉换行
            .replace(/<\/?[^>]*>/g, "") // 去掉标签

      }
      else {
        return ''
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val;
      this.tableShow();
    }
  }
}
</script>

<style scoped>
/*表头*/
.container-fuild {

  float: left;
  /*padding-top:1.875rem;*/
  padding-right: 1.875rem;
  padding-left: 1.875rem;
  width: 93%;
  margin-right: auto;
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #7d94c0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.page-titles {
  justify-content: space-between;
  /*padding: 0.1375rem 0.5rem;*/
  padding-top: 0.25rem;
  padding-right: 1.875rem;
  padding-bottom: 0.25rem;
  padding-left: 1.875rem;
  background: #fff;
  margin-bottom: 1.875rem;
  border-radius: 1rem;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
}

.page-titles .breadcrumb {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  font-size: 1.1875rem;
  display: flex;
  flex-wrap: wrap;
  padding: 0 0;
  margin-bottom: 1rem;
  list-style: none;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

.breadcrumb li.active {
  font-weight: 600;
  font-size: 1.1875rem;
}

.breadcrumb li {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0.5rem;
  font-size: 1.1875rem;
}

/*主题部分*/
.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

.card {
  width: 100%;
  margin-bottom: 1.875rem;
  background-color: #fff;
  transition: all .5s ease-in-out;
  position: relative;
  border: 0rem solid transparent;
  border-radius: 1.25rem;
  box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgb(82 63 105 / 5%);
  height: calc(100% - 30px);

  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
}

.card-header {
  border-color: #f5f5f5;
  position: relative;
  background: transparent;
  padding-top: 0rem;
  padding-right: 1.875rem;
  padding-bottom: 0rem;
  padding-left: 1.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 300;
  color: #909399;
  text-transform: capitalize;
}

.card-body {

  padding-top: 1.125rem;
  padding-right: 1.875rem;
  padding-bottom: 1.125rem;
  padding-left: 1.875rem;

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.table-responsive-md {
  min-width: 36rem !important;
}

/*弹窗*/
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

/*让dialog能够悬浮在中间*/
.showAll_dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

::v-deep .el-dialog {
  margin: 0 auto !important;
  height: 90%;
  overflow: auto;
  background-color: white;
}

.el-dialog__body {
  position: absolute;
  left: 0;
  top: 54px;
  bottom: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;

  line-height: 30px;
  padding: 15px;
}

/*弹窗标题的padding*/
::v-deep .el-dialog__header {
  padding-top: 20px;
  padding-right: 50px;
  padding-bottom: 10px;
  padding-left: 50px;
}

/*弹窗标题的padding*/
::v-deep .el-dialog__header {
  padding-top: 30px;
  padding-right: 50px;
  padding-bottom: 30px;
  padding-left: 50px;
}

/*弹窗标题的颜色*/
::v-deep .el-dialog__title {
  color: #909399;
}

/*弹窗尾部按钮颜色*/
.el-button--primary {
  color: #FFF;
  background-color: #016bb7;
  border-color: #016bb7;
}


::v-deep .el-button {
  border-radius: 5px;
}

/*下拉框选中的颜色样式*/
/deep/ .el-input__inner {
  color: #7d94c0;
}

/*富文本编辑器*/
.el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
  border-color: #7d94c0;
}

.el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
  border-color: #7d94c0;
}

/deep/ .el-select .el-input__inner:focus {
  border-color: #7d94c0;
}

/*更换表格字体颜色*/
::v-deep .el-table {
  color: #7d94c0;
}

/*富文本编辑器*/
.editor {
  line-height: normal !important;
  height: 800px;
}

.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "请输入链接地址:";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: '10px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: '标题1';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: '标题2';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: '标题3';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: '标题4';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: '标题5';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: '衬线字体';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: '等宽字体';
}

.container-fuild[data-v-67b1d0dc] {
  color: black;
}

::v-deep .ql-toolbar.ql-snow {
  text-align: left;
}

/*dialog的按钮布局*/
.btn-onsubmit {
  margin-top: 30px;
  margin-bottom: 1px;
  margin-left: 30px;
  text-align: left;
}

/*校验框样式*/
::v-deep .el-form-item__error{
  margin-left: 60px;
}
</style>